'use strict'
import React from 'react';
import ReactDom from 'react-dom';
import './panelPop.scss';
import Bag from 'views/modal/bag/bag';
import Pickup from 'views/modal/pickup/pickup';

class PanelPop {
    constructor() {
        this.opts = {
            maskClosable: true,
            onMaskClose: null
        }
    }
    close() {
        // ReactDom.unmountComponentAtNode(this.node);
        this.node.parentNode.removeChild(this.node);
        this.node = null;
    }
    getComponent(content, opts) {
        switch (content) {
            case 'bag':
                return <Bag close={this.close.bind(this)} {...opts} />;
                break;
            case 'pickup':
                return <Pickup close={this.close.bind(this)} {...opts} />;
                break;
            default:
                return content;
                break;
        }
    }
    show(content, opts) {
        opts = opts || {};
        Object.assign(this.opts, opts);
        if (!this.node) {
            this.node = document.createElement("div");
            document.getElementById("mainContent").appendChild(this.node);
        }
        if (typeof content === 'string') {
            content = this.getComponent(content, opts);
        } else {
            content = React.cloneElement(
                content,
                { close: this.close.bind(this), ...opts }
            )
        }
        ReactDom.render(
            <div className="panelPop flex-col">
                <div className="bg" onClick={this.close.bind(this)}></div>
                <div className="content flex-g-1 flex-center">
                    {content}
                </div>
                {/* <div className="panelPop-bottom">
                    <button onClick={this.close.bind(this)}>关闭</button>
                </div> */}
            </div>, this.node)
    }
    showMainBody(content, opts) {
        opts = opts || {};
        opts = Object.assign(this.opts, opts);
        if (!this.node) {
            this.node = document.createElement("div");
            document.getElementById("mainBody").appendChild(this.node);
        }
        if (typeof content === 'string') {
            content = this.getComponent(content, opts);
        } else {
            content = React.cloneElement(
                content,
                { close: this.close.bind(this), ...opts }
            )
        }
        ReactDom.render(
            <div className="panelPop flex-col">
                <div className="bg" onClick={this.close.bind(this)}></div>
                <div className="content flex-g-1 flex-center">
                    {content}
                </div>
            </div>, this.node)
    }
    showMain(content, opts) {
        opts = opts || {};
        opts = Object.assign(this.opts, opts);
        if (!this.node) {
            this.node = document.createElement("div");
            document.getElementById("main").appendChild(this.node);
        }
        if (typeof content === 'string') {
            content = this.getComponent(content, opts);
        } else {
            content = React.cloneElement(
                content,
                { close: this.close.bind(this), ...opts }
            )
        }
        ReactDom.render(
            <div className="panelPop flex-col">
                <div className="bg" onClick={this.close.bind(this)}></div>
                <div className="content flex-g-1 flex-center">
                    {content}
                </div>
            </div>, this.node)
    }
    showModal(content, opts) {
        let self = this;
        opts = opts || {};
        Object.assign(this.opts, opts);
        if (!this.node) {
            this.node = document.createElement("div");
            document.getElementById("mainContent").appendChild(this.node);
        }
        if (typeof content === 'string') {
            content = this.getComponent(content, opts);
        } else {
            content = React.cloneElement(
                content,
                { close: this.close.bind(this), ...opts }
            )
        }
        ReactDom.render(
            <div className="panelPopModal panelPop flex-center">
                <div className="bg" onClick={this.close.bind(this)}></div>
                <div className="contentModal">
                    {content}
                </div>
            </div>, this.node)
    }
}

export let panelPop = new PanelPop();
